<template>
    <div class="custom-message">
        <div class="title">发送订单</div>
        <div class="order-item">
            <span>编号：</span>
            <input type="text" v-model="number" maxlength="20" />
        </div>
        <div class="order-item">
            <span>商品：</span>
            <input type="text" v-model="goods" maxlength="20"/>
        </div>
        <div class="order-item">
            <span>金额：</span>
            <input type="text" v-model="price" maxlength="10" />
        </div>
        <div class="action-btn">
            <div class="cancel-btn" @click="cancel">取消</div>
            <div class="send-btn" @click="sendCustomMessage">发送</div>
        </div>
    </div>
</template>

<script>
    export default {
        name : 'customMessageForm',
        data () {
            return {
                number : '',
                goods : '',
                price : '',
                to : null
            }
        },
        beforeMount () {
            let toStr = this.$route.query.to;
            this.to = JSON.parse(toStr);
        },
        methods : {
            sendCustomMessage () {
                let customMessage = this.im.createCustomMessage({
                    type : 'order',
                    payload : {
                        number : this.number,
                        goods : this.goods,
                        price : this.price
                    },
                    to : {
                        id : this.to.id,
                        type : this.to.type,
                        data : {name : this.to.name, avatar: this.to.avatar}
                    }
                });
                this.imService.sendMessage(customMessage).then(() => {
                    this.$router.go(-1)
                })
            },
            cancel () {
                this.$router.go(-1)
            }
        }
    }
</script>
<style>
   @import "./customMessageForm.css";
</style>
